<div *ngIf="!_isLoaded" class="loading">
    <mat-spinner></mat-spinner>
</div>

<div *ngIf="isError" class="error">
    <mat-icon>error</mat-icon>
    <div>The corrupted reports have been received from an API server. Please check your HEP.</div>
</div>
<div *ngIf="!isError">
    <div *ngIf="isRTP">
        <!-- RTP -->
        <h5 *ngIf="isRTP">RTP</h5>
        <div class="responcive">
            <div class="chart-container">
                <canvas *ngIf="!isNoDataRTP" baseChart #rtpChart='base-chart' [datasets]="chartDataRTP" [labels]="chartLabelsRTP"
                    [options]="chartOptions" [legend]="chartLegend" [chartType]="chartType">
                </canvas>
                <div *ngIf="isNoDataRTP" class="nodata">
                    <div [ngStyle]="{'backgroundColor':color}" class='nodata-card'>
                        <div class='text-container'>
                            <h1>No Data shown</h1>
                            <p>Please select datastreams to display chart</p>
                        </div>
                    </div>
                </div>

            </div>


        </div>
        <div class="responcive">
            <button class="hide-button rotate90deg"
                (click)="hideLabelsFlagRTP = !hideLabelsFlagRTP">{{ hideLabelsFlagRTP ?  'show' : 'hide' }}
                labels</button>
            <div *ngIf="!hideLabelsFlagRTP" class="item-container">
                <div [className]="'item ' + item.color" *ngFor="let item of listRTP">
                    <div class="text">{{ item.name | uppercase }}</div>
                    <div class="text-badge">{{ item.value }}</div>
                </div>
            </div>
            <mat-card *ngFor="let item of streamsRTP" class="cardStreem">
                <mat-checkbox [(ngModel)]="item._checked" [(indeterminate)]="item._indeterminate"
                    (change)="onChangeCheckBoxRTP(item, null, true)">
                    <div style="display: flex; align-items: center; align-content: center;">
                        <span>{{ item.srcIp }}</span>
                        <mat-icon>trending_flat</mat-icon>
                        <span>{{ item.dstIp }}</span>
                    </div>
                </mat-checkbox>
                <div style="padding-left: 2rem; display: flex; flex-direction: column;">
                    <mat-checkbox (change)="onChangeCheckBoxRTP(item,'TOTAL_PK')" [(ngModel)]="item.TOTAL_PK">
                        <span class="color-bable" [style.background-color]="item.TOTAL_PK_color"></span>
                        TOTAL_PK
                    </mat-checkbox>
                    <mat-checkbox (change)="onChangeCheckBoxRTP(item,'EXPECTED_PK')" [(ngModel)]="item.EXPECTED_PK">
                        <span class="color-bable" [style.background-color]="item.EXPECTED_PK_color"></span>
                        EXPECTED_PK
                    </mat-checkbox>
                    <mat-checkbox (change)="onChangeCheckBoxRTP(item,'JITTER')" [(ngModel)]="item.JITTER">
                        <span class="color-bable" [style.background-color]="item.JITTER_color"></span>
                        JITTER
                    </mat-checkbox>
                    <mat-checkbox (change)="onChangeCheckBoxRTP(item,'MOS')" [(ngModel)]="item.MOS">
                        <span class="color-bable" [style.background-color]="item.MOS_color"></span>
                        MOS
                    </mat-checkbox>
                    <mat-checkbox (change)="onChangeCheckBoxRTP(item,'DELTA')" [(ngModel)]="item.DELTA">
                        <span class="color-bable" [style.background-color]="item.DELTA_color"></span>
                        DELTA
                    </mat-checkbox>
                    <mat-checkbox (change)="onChangeCheckBoxRTP(item,'PACKET_LOSS')" [(ngModel)]="item.PACKET_LOSS">
                        <span class="color-bable" [style.background-color]="item.PACKET_LOSS_color"></span>
                        PACKET_LOSS
                    </mat-checkbox>
                </div>
            </mat-card>
        </div>
    </div>
    <div *ngIf="isRTCP">
        <!-- RTCP -->
        <h5 *ngIf="isRTCP">RTCP</h5>
        <div class="responcive">
            <div class="chart-container">
                <canvas *ngIf="!isNoDataRTCP" baseChart #rtcpChart='base-chart' [datasets]="chartData" [labels]="chartLabels"
                    [options]="chartOptions" [legend]="chartLegend" [chartType]="chartType">
                </canvas>
                <div *ngIf="isNoDataRTCP" class="nodata">
                    <div [ngStyle]="{'backgroundColor':color}" class='nodata-card'>
                        <div class='text-container'>
                            <h1>No Data shown</h1>
                            <p>Please select datastreams to display chart</p>
                        </div>
                    </div>
                </div>

            </div>


        </div>
        <div class="responcive">
            <button class="hide-button rotate90deg"
                (click)="hideLabelsFlag = !hideLabelsFlag">{{ hideLabelsFlag ?  'show' : 'hide' }} labels</button>
            <div *ngIf="!hideLabelsFlag" class="item-container">
                <div [className]="'item ' + item.color" *ngFor="let item of list">
                    <div class="text">{{ item.name | uppercase }}</div>
                    <div class="text-badge">{{ item.value }}</div>
                </div>
            </div>

            <mat-card *ngFor="let item of streams" class="cardStreem">
                <mat-checkbox [(ngModel)]="item._checked" [(indeterminate)]="item._indeterminate"
                    (change)="onChangeCheckBox(item, null, true)">
                    <div style="display: flex; align-items: center; align-content: center;">
                        <span>{{ item.srcIp }}</span>
                        <mat-icon>trending_flat</mat-icon>
                        <span>{{ item.dstIp }}</span>
                    </div>
                </mat-checkbox>
                <div style="padding-left: 2rem; display: flex; flex-direction: column;">
                    <mat-checkbox (change)="onChangeCheckBox(item, 'packets')" [(ngModel)]="item.packets">
                        <span class="color-bable" [style.background-color]="item.packets_color"></span>
                        packets
                    </mat-checkbox>
                    <mat-checkbox (change)="onChangeCheckBox(item, 'octets')" [(ngModel)]="item.octets">
                        <span class="color-bable" [style.background-color]="item.octets_color"></span>
                        octets
                    </mat-checkbox>
                    <mat-checkbox (change)="onChangeCheckBox(item, 'highest_seq_no')" [(ngModel)]="item.highest_seq_no">
                        <span class="color-bable" [style.background-color]="item.highest_seq_no_color"></span>
                        highest_seq_no
                    </mat-checkbox>
                    <mat-checkbox (change)="onChangeCheckBox(item, 'mos')" [(ngModel)]="item.mos">
                        <span class="color-bable" [style.background-color]="item.mos_color"></span>
                        mos
                    </mat-checkbox>
                    <mat-checkbox (change)="onChangeCheckBox(item, 'ia_jitter')" [(ngModel)]="item.ia_jitter">
                        <span class="color-bable" [style.background-color]="item.ia_jitter_color"></span>
                        ia_jitter
                    </mat-checkbox>
                    <mat-checkbox (change)="onChangeCheckBox(item, 'lsr')" [(ngModel)]="item.lsr">
                        <span class="color-bable" [style.background-color]="item.lsr_color"></span>
                        lsr
                    </mat-checkbox>
                    <mat-checkbox (change)="onChangeCheckBox(item, 'packets_lost')" [(ngModel)]="item.packets_lost">
                        <span class="color-bable" [style.background-color]="item.packets_lost_color"></span>
                        packets_lost
                    </mat-checkbox>
                    <mat-checkbox (change)="onChangeCheckBox(item, 'fraction_lost')" [(ngModel)]="item.fraction_lost">
                        <span class="color-bable" [style.background-color]="item.fraction_lost_color"></span>
                        fraction_lost
                    </mat-checkbox>
                </div>
            </mat-card>
        </div>
    </div>
</div>
